<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>需求:如果以下3个条件都满足,则提示注册成功！</h4>
    <ol>
        <li>
            获取焦点时提示:请输入用户名4-10位
            失去焦点时提示:用户名不正确或者不能为空
        </li>
        <li>
            获取焦点时提示:请输入密码6-8位
            失去焦点时提示:密码格式不正确或者不能为空
        </li>
        <li>
            获取焦点时提示:请再次输入密码
            失去焦点时提示:密码不一致或者密码不能为空
        </li>
    </ol>
    <br><br><br><br><br>
    <input type="text" id="inp1" onfocus="show1_user()" onblur="show2_user()" placeholder="请输入用户名4-10位">
    <br><br><span id="d1"></span><br><br>
    <input type="text" id="inp2" onfocus="show1_upwd()" onblur="show2_upwd()" placeholder="请输入密码6-8位">
    <br><br><span id="d2"></span><br><br>
    <input type="text" id="inp3" onfocus="show1_upwd1()" onblur="show2_upwd1()" placeholder="请再次输入密码">
    <br><br><span id="d3"></span><br><br>
    <button onclick="show()">注 册</button>
    <script> 
        var a=false;
		var b=false;
		var c=false;
        //一：用户名验证
        function show1_user() {
            d1.innerHTML = '请输入用户名4-10位';
        }
        function show2_user() {
            var res1 = inp1.value;
            if (res1.length == 0) {
                d1.innerHTML = '用户名不正确';
                a=false;
            } else if (res1.length >=4 && res1.length <= 10) {
                d1.innerHTML = inp1.value;
                a=true;
            } else {
                d1.innerHTML = '用户名不正确';
                a=false;
            }
        }
        //二：密码验证
        function show1_upwd() {
            d2.innerHTML = '请输入密码6-8位';
        }
        function show2_upwd() {
            var res2 = inp2.value;
            if (res2.length == 0) {
                d2.innerHTML = '密码不正确';
                b=false;
            } else if (res2.length >=6 && res2.length <= 8) {
                d2.innerHTML = inp2.value;
                b=true;
            } else {
                d2.innerHTML = '密码不正确';
                b=false;
            }
        }
        //三：密码再次验证
        function show1_upwd1() {
            d3.innerHTML = '请再次输入密码';
        }
        function show2_upwd1() {
            var str = inp3.value;
            if (str.length == 0) {
                d3.innerHTML = '密码不正确';
                c=false;
            } else if (str == inp2.value) {
                d3.innerHTML = `密码正确，密码是${inp2.value}`;
                c=true;
            } else {
                d3.innerHTML = '密码不正确,请重新输入';
                c=false;
            } 
        }
        //用户名、密码验证--以上3个条件都满足,则提示注册成功！
        function show() {
            if (a==true && b==true && c==true) {
                alert('注册成功！');
            } else {
                alert('信息不一致，注册失败！');
            }
        }
    </script>
</body>
</html>